<template>
	<view class="body_base_data_row">
		<view class="min_title"> 完成评估，为您定制专属训练日程 </view>
		<view class="step_row">
			<view class="current_step" :style="{ width: (currentStep / 6) * 100 + '%' }">
			</view>
		</view>
		<view class="back_row" v-show="currentStep > 1" @click="lastStep">
			<image src="/pagesTool/static/backIcon.png" mode="widthFix"></image>
		</view>
		<view class="step">
			<StepA v-show="currentStep == 1" ref="stepA" />
			<StepB v-show="currentStep == 2" @nextStep="nextStep" ref="stepB" />
			<StepC v-show="currentStep == 3" @nextStep="nextStep" ref="stepC" />
			<StepD v-show="currentStep == 4" ref="stepD" />
			<StepE v-show="currentStep == 5" ref="stepE" :trainTotalDay="trainTotalDay"
				:unTrainTotalDay="unTrainTotalDay" />
			<StepF v-show="currentStep == 6" ref="stepF" />
		</view>
		<view class="btn_box">
			<view class="btn" v-show="currentStep == 1 || currentStep == 4 || currentStep == 5" @click="nextStep">继续
			</view>
			<!-- 		<view class="btn last_btn" v-show="currentStep > 1" @click="lastStep">
				上一步
			</view> -->
			<view class="btn" v-show="currentStep == 6" @click="handleFinsh">
				完成
			</view>
		</view>
	</view>
</template>

<script>
	import StepA from "./components/stepA.vue";
	import StepB from "./components/stepB.vue";
	import StepC from "./components/stepC.vue";
	import StepD from "./components/stepD.vue";
	import StepE from "./components/stepE.vue";
	import StepF from "./components/stepF.vue";
	import {
		saveUserActionInfo
	} from "@/apis/schedule.js";
	export default {
		components: {
			StepA,
			StepB,
			StepC,
			StepD,
			StepE,
			StepF,
		},
		data() {
			return {
				currentStep: 1, //第几步
				trainTotalDay: 0, // 训练总天数
				unTrainTotalDay: 0, // 不训练总天数
			};
		},
		methods: {
			// 下一步
			async nextStep() {
				let currentForm;
				switch (this.currentStep) {
					case 1:
						currentForm = this.$refs.stepA;
						break;
					case 2:
						currentForm = this.$refs.stepB;
						break;
					case 3:
						currentForm = this.$refs.stepC;
						break;
					case 4:
						currentForm = this.$refs.stepD;
						break;
					case 5:
						currentForm = this.$refs.stepE;
						break;
					case 6:
						currentForm = this.$refs.stepF;
						break;
				}

				// 使用validateForm方法进行表单校验
				const validationResult = currentForm.validateForm();
				if (!validationResult) {
					return;
				}

				let currentFormData = currentForm.getFormData();
				if (this.currentStep == 4) {
					// 如果即将进入日期步骤
					console.log(123);
					this.trainTotalDay = currentFormData.trainTotalDay;
					this.unTrainTotalDay = currentFormData.unTrainTotalDay;
					this.currentStep++;
				} else {
					this.currentStep++;
				}
			},
			// 上一步
			lastStep() {
				this.currentStep--;
			},
			// 完成
			handleFinsh() {
				// 验证最后一步表单
				const validationResult = this.$refs.stepF.validateForm();
				if (!validationResult) {
					return;
				}

				const formAData = this.$refs.stepA.getFormData();
				const formBData = this.$refs.stepB.getFormData();
				const formCData = this.$refs.stepC.getFormData();
				const formDData = this.$refs.stepD.getFormData();
				const formEData = this.$refs.stepE.getFormData();
				const formFData = this.$refs.stepF.getFormData();
				const allData = {
					...formAData,
					...formBData,
					...formCData,
					...formDData,
					...formEData,
					...formFData,
				};
				console.log(allData);
				saveUserActionInfo(allData).then((res) => {
					if (res.data) {
						uni.showToast({
							title: "保存成功",
							icon: "none",
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 1,
							});
						}, 1000);
					}
				});
			},
		},
		// onShow() {

		// },
		onLoad() {
			// uni.enableAlertBeforeUnload({
			// 	message: "确认取消计划安排?",
			// 	success: function(res) {
			// 		console.log("点击确认按钮了:", res);
			// 		uni.switchTab({
			// 			url: '/pages/index/index'
			// 		});
			// 	},
			// 	fail: function(errMsg) {
			// 		console.log("点击取消按钮了:", errMsg);
			// 	}
			// });
		},
		// 监听页面返回
		onUnload() {
			// uni.disableAlertBeforeUnload();
		}
	};
</script>
<style lang="less" scoped>
	page {
		margin: 0;
		padding: 0;
		height: 100%;
		width: 100%;
		background: #fff !important;
	}

	// 去掉页面滚动条
	::-webkit-scrollbar {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}

	.body_base_data_row {
		width: 100%;
		height: 100%;
		padding: 0 60rpx;
		padding: 30rpx;

		.min_title {
			color: rgba(124, 124, 126, 1);
			font-size: 24rpx;
			text-align: center;
			margin-bottom: 20rpx;
		}

		.step_row {
			width: 100%;
			height: 16rpx;
			border-radius: 20rpx;
			background-color: #e5e5e5;
			position: relative;
			margin-bottom: 30rpx;
			margin-top: 5rpx;

			.current_step {
				position: absolute;
				left: 0%;
				top: 0;
				border-radius: 20rpx;
				background-color: #6e58aa;
				width: 20%;
				height: 16rpx;
			}
		}

		.back_row {
			margin-bottom: 20rpx;

			image {
				width: 40rpx;
			}
		}

		.step1 {}

		.btn_box {
			.btn {
				width: 100%;
				padding: 20rpx 0;
				border-radius: 10px;
				background: rgba(110, 88, 170, 1);
				color: #fff;
				font-size: 32rpx;
				text-align: center;
				margin-top: 30rpx;
			}

			.last_btn {
				border: 2rpx solid #6e58aa;
				color: #6e58aa;
				background-color: #fff;
			}
		}
	}
</style>